<template>
  <el-scrollbar style="padding: 0 10px; box-sizing: border-box">
    <!-- <div
      v-for="(item, index) in datalist"
      :key="index"
      :style="{}"
      class="marklistitem fb"
      @mouseleave="mouseleave(item)"
      @mouseenter="mouseenter(item)"
    > -->
    <br />
    <el-form label-width="auto" style="">
      <el-form-item label="任务名称">
        <el-input v-model="fenfaparams.data.mingcheng" type="text" />
      </el-form-item>
      <el-form-item label="层级" v-if="true">
        <cengji :fenfaparams="fenfaparams.data" />
      </el-form-item>
      <el-form-item label="区域范围">
        <quyufanweicom :fenfaparams="fenfaparams.data" />
      </el-form-item>
      <el-form-item label="分割方式" v-if="true">
        <fengecom :fenfaparams="fenfaparams.data" />
      </el-form-item>
      <el-form-item label="投影方式" v-if="true">
        <n-radio-group
          v-model:value="fenfaparams.data.touyingfangshi"
          name="radiobuttongroup1"
        >
          <n-radio :key="'jignweidu'" :value="'jignweidu'" :label="'经纬度'" />
          <n-radio :key="'mokatuo'" :value="'mokatuo'" :label="'墨卡托'" />
        </n-radio-group>
      </el-form-item>
      <el-form-item label="格式" v-if="true">
        <n-radio-group
          v-model:value="fenfaparams.data.shuchugeshi"
          name="radiobuttongroup1"
        >
          <n-radio :key="'GeoTiff'" :value="'GeoTiff'" :label="'GeoTiff'" />
          <n-radio :key="'Tiff+TFW'" :value="'Tiff+TFW'" :label="'Tiff+TFW'" />
          <n-radio :key="'JPG+JGW'" :value="'JPG+JGW'" :label="'JPG+JGW'" />
        </n-radio-group>
      </el-form-item>
      <el-form-item label="时间范围" v-if="true">
        <el-date-picker
          v-model="fenfaparams.data.shijianfanwei"
          type="daterange"
          start-placeholder="开始"
          end-placeholder="结束"
          value-format="YYYY-MM-DD"
          :default-value="[new Date(2010, 9, 1), new Date(2010, 10, 1)]"
        />
      </el-form-item>
      <el-form-item label="时间分割" v-if="true">
        <n-radio-group
          v-model:value="fenfaparams.data.shijianbanben"
          name="radiobuttongroup1"
        >
          <n-radio :key="'不分割'" :value="'不分割'" :label="'不分割'" />
          <n-radio :key="'月份'" :value="'月份'" :label="'月份'" />
          <n-radio :key="'年份'" :value="'年份'" :label="'年份'" />
        </n-radio-group>
      </el-form-item>
      <!-- <el-form-item label="影像名称">
        <el-input v-model="fenfaparams.data.yingxiangmingcheng" type="text" />
      </el-form-item> -->
      <!-- <el-form-item label="传感器">
        <el-select
          v-model="fenfaparams.data.chuanganqi"
          placeholder=""
          multiple
          style="width: 100%;"
        >
          <el-option
            v-for="item in chuanganqiopts"
            :key="item"
            :label="item"
            :value="item"
          />
        </el-select>
      </el-form-item> -->
      <el-form-item>
        <div class="btns" style="display: flex; width: 100%;justify-content: center">
          <!-- <el-button type="primary" @click="onSubmit">浏览</el-button>/ -->

          <el-popover
            placement="top-start"
            title="查询结果"
            :width="350"
            trigger="hover"
            content=""
          >
            <el-table :data="sdataList" border stripe :height="300" >
              <el-table-column v-for="col in scolumns"
                :prop="col.id"
                :key="col.id"
                :label="col.label"
                >
              </el-table-column>
            </el-table>
            
            <template #reference>
              <!-- <el-button type="primary" @click="searchOnEarth()">球上浏览</el-button> -->
            </template>
          </el-popover>

          <el-button type="primary" @click="searchOnEarth()">查询</el-button>

          &nbsp;
          &nbsp;
          <el-button type="primary" @click="createTask()">后台处理</el-button>
          &nbsp;
          &nbsp;
          <el-popover
            placement="top-start"
            title="任务信息"
            :width="350"
            trigger="hover"
            content=""
          >
          <el-descriptions :column="1" border>
            <el-descriptions-item label="处理进度">

              已完成
              
            </el-descriptions-item>

            <el-descriptions-item label="操作">
              <el-button type="primary" size="default" @click="zuobiaoOK">下载数据</el-button>
            </el-descriptions-item>

          </el-descriptions>
            
            <template #reference>
              <el-button type="primary" @click="DLClick()">下载</el-button>
            </template>
          </el-popover>
          &nbsp;
          &nbsp;
          <el-button @click="resetClick()">重置</el-button>
        </div>
      </el-form-item>
    </el-form>
    <!-- {{ fenfaparams.data }} -->
  </el-scrollbar>
</template>

<script setup>
import {
  defineProps,
  onMounted,
  defineEmits,
  ref,
  onUnmounted,
  defineExpose,
  reactive,
} from "vue";

import fengecom from "./common/fengefangshi.vue";
import quyufanweicom from "./common/quyufanwei.vue";

let searchValKeyWord = ref("");
import { useEarthStore } from "@/stores/earth";

import { ElMessage } from "element-plus";
import { apiList } from "@/api/apiList";

import { useRouter, useRoute } from "vue-router";

let router = useRouter();
let route = useRoute();

// let fenfaparams.data = reactive({

//     mingcheng: "",
//     cengji: "",
//     quyufanwei: "",
//     quyufanweival: [],
//     fenggefangshi: "",
//     fenggefangshival: "",
//     touyingfangshi: "jignweidu",
//     shuchugeshi: "GeoTiff",
//     shijianfanwei: [],
//     shijianbanben: "不分割",

// });

let fenfaparams = reactive({
  data: {
    mingcheng: "",
    cengji: "",
    quyufanwei: "",
    quyufanweival: [],
    fenggefangshi: "不分割",
    fenggefangshival: "",
    touyingfangshi: "jignweidu",
    shuchugeshi: "GeoTiff",
    shijianfanwei: [],
    shijianbanben: "不分割",
    yingxiangmingcheng: "",
    chuanganqi: [],
  },
});

let chuanganqiopts = ref([]);

const earthStore = useEarthStore();

let taskcondtions = reactive({
  level: 10,
});

let dataList = ref([]);
const form = reactive({
  quyutype: "huizhi",
  datarange: [],
});

const radio1 = ref("huizhi");

const leveloptions = ref([]);

function resetClick() {
  fenfaparams.data = {
    mingcheng: "",
    cengji: "",
    quyufanwei: "",
    quyufanweival: [],
    fenggefangshi: "",
    fenggefangshival: "",
    touyingfangshi: "jignweidu",
    shuchugeshi: "GeoTiff",
    shijianfanwei: [],
    shijianbanben: "不分割",
    yingxiangmingcheng: "",
    chuanganqi: [],
  };
}

let sdataList = ref([])

let scolumns = [
  {
    id: 'dataSource',
    label: '数据源',
    width: 100,
  },
  {
    id: 'captureDate',
    label: '拍摄时间',
    width: 100,
  },
]

function DLClick() {
  
}

function searchOnEarth() {

  let params = {
    timeRange: "", //时间范围（:分隔）
    sensor: "", //传感器（,分隔）
    wxName: "", //卫星名称
    sunCorner: "", //太阳角
    geojson: [], //矩形框四角点
    shpPath: "", //矢量文件导入
    level: "", //分辨率
  };

  if (fenfaparams.data.yingxiangmingcheng != '') {
    params.wxName = fenfaparams.data.yingxiangmingcheng
  }

  if (fenfaparams.data.cengji != '') {
    params.level = fenfaparams.data.cengji
  }

  if (fenfaparams.data.quyufanweival != []) {
    // 处理区域范围
    let ress = []
    fenfaparams.data.quyufanweival.map(item => {
      let tmpitem = []
      item.features[0].geometry.coordinates[0].map(iitem => {
        tmpitem.push(iitem.join(" "))
      })
      ress.push(tmpitem.join(","))
    })
    params.geojson = ress
  }

  if (fenfaparams.data.chuanganqi != []) {
    params.sensor = fenfaparams.data.chuanganqi.join(',')
  }
  // 时间范围
  if (fenfaparams.data.shijianfanwei != []) {
    params.timeRange = fenfaparams.data.shijianfanwei.join(':')
  }

  // return
  apiList.getLineSearch(params).then((res) => {

    ElMessage.success('条件查询成功')

    sdataList.value = res.data;
  });
}

function createTask() {
  let params = {
    taskName: fenfaparams.data.mingcheng, //任务名
    levels: fenfaparams.data.cengji, //层级
    divideType: fenfaparams.data.fenggefangshi, //分隔方式
    regionalRange: '', //区域范围
    projectionMode: fenfaparams.data.touyingfangshi, //投影方式
    outputFormat: fenfaparams.data.shuchugeshi, //输出格式
    timeRange: '', //时间范围
    timeDivide: fenfaparams.data.shijianbanben, //时间分隔
    divideRegionalRange: '', //时间分隔
  };

  // 时间范围
  if (fenfaparams.data.shijianfanwei != []) {
    params.timeRange = fenfaparams.data.shijianfanwei.join(' - ')
  }

  // 分割方式
  // 根据分割方式确认参数
  // fenfaparams.data.fenggefangshi
  // fenfaparams.data.quyufanweival

  
  let quyufanweivalbasejson = {
    type: "FeatureCollection",
    features: [],
  };
  
  fenfaparams.data.quyufanweival.map(item => {
    quyufanweivalbasejson.features.push(...item.features)
  })
  
  
  
  
  if (fenfaparams.data.fenggefangshi == '不分割') {
    
    let basejson = {
      type: "FeatureCollection",
      features: [],
    };
    
    if ( fenfaparams.data.quyufanweival.length != 0) {
      fenfaparams.data.quyufanweival.map(item => {
        basejson.features.push(
          ...item.features
          )
        })
      }
      fenfaparams.data.fenggefangshival = JSON.stringify(basejson)
      // params.regionalRange
    }else{
      
    }
    
    
    
  params.regionalRange =  JSON.stringify(quyufanweivalbasejson)
    
  params['divideRegionalRange'] = fenfaparams.data.fenggefangshival

  console.log(params);

  // console.log(JSON.parse(params.regionalRange).features.length);


  // ElMessage.success(JSON.parse(params.regionalRange).features.length + '');


  // return

  apiList.createDistribute(params).then((res) => {
    if (res.code == 200) {

      ElMessage.success("创建任务成功");

      // 清空地图标绘

      

      resetClick();

      // 跳转到分发列表
      router.push('/yingxiangronghe/fenfajilu')


    } else {
      ElMessage.error("创建任务失败");
    }
  });

  // apiList.getDistributeList
}

onMounted(() => {

  for (let index = 10; index <= 19; index++) {
    leveloptions.value.push({
      value: index,
      label: index,
      len: 0.5 * Math.pow(2, 19 - index),
    });
  }

  apiList.getAttributeSensor().then((res) => {
    chuanganqiopts.value = res.data;
  });

});

function itemclick(item) {
  console.log("执行卷帘");

  let item1 = [
    {
      type: "tif",
      // filename: `http://127.0.0.1:8080/a.tif`,
      filename: "/20191104-HXH.tif",
      domname: "/20191104-HXH.tif",
      // filename: "hxh.tif",
    },
    {
      type: "tif",
      // filename: `http://127.0.0.1:8080/a.tif`,
      filename: "/20180410-HXH.tif",
      domname: "/20180410-HXH.tif",
      // filename: "hxh.tif",
    },
  ];
  // 清空
  delete earthStore.pannellist["rollerpannel"];
  setTimeout(() => {
    earthStore.pannellist["rollerpannel"] = {
      name: "roller-pannel",
      options: {
        data: item1,
      },
    };
  }, 0);
}

function searchclick() {
  dataList.value = [
    {
      id: 1,
      name: "横须贺港口",
      filename: "/20180410-HXH.tif",
    },
  ];
}

function qingkongclick() {}
function closewindow() {
  qingkongclick();
}
</script>
<style lang="scss" scoped>
.eachlevelitem {
  border: 1px solid white;
  width: 25px;
  height: 30px;
  cursor: pointer;
  &:hover {
    background-color: #3333;
  }
}

.timelinespeed .el-slider__stop {
  height: 9px;
  margin-top: -8px;
  width: 2px;
  border-radius: 0;
  background-color: #e4e7ed;
}

.timelinespeed .el-slider__marks-text {
  margin-top: -30px;
}

.timelinespeed .el-slider__button {
  width: 3px !important;
  // height: 14px;
  border-radius: 0px !important;
  // background: url(earthsdk/XbsjCesium/Widgets/Images/TimelineIcons.png) no-repeat center;
  background-color: #409eff;
  border: 1px solid #409eff;
  transform: rotate(-0deg) !important;
}

.timelinespeed .el-slider__button.hover,
.el-slider__button:hover {
  transform: rotate(-0deg);
}

.sliderdiv {
  background-color: #44495288;
  border-radius: 3px;
  z-index: 10;

  .demonstration {
    line-height: 30px;
    padding: 0px 3px;
  }
}

.earth-search-bar {
  position: absolute;
  top: 10px;
  left: 30px;
  z-index: 4;
  display: flex;
  width: 500px;
}

.marklistitem {
  border: 1px solid white;
  padding: 10px;
  // cursor: pointer;
  margin: 10px;
  // width: 85%;
}

.upload-demo {
  width: 100%;
  //margin-bottom: 20px;
  //margin-top: 10px;
  display: flex;
  
  //justify-content: center;
}
</style>
